import React, { useContext, useEffect, useState } from "react";
import {Badge, message, Table, Tag} from "antd";
import { Link } from "react-router-dom";
import { group } from '../vo/request';
import { PageContext } from './context';


const {Column} = Table;

export function AllApi() {
    const pages = useContext(PageContext)
    const projectId = sessionStorage.getItem("project");
    const [data, setData] = useState([] as any[]);
    const [isLoading, setLoading] = useState(false);
    useEffect(() => {
        (async () => {
            if(projectId) {
                try {
                    setLoading(true);
                    let res = await group.query(projectId as string);
                    setLoading(false);
                    if(!res.code && res.data) {
                        let newData:any[] = [];
                        res.data.forEach((item) => {
                            if(item.apis.length) {
                                item.apis.forEach((value) => {
                                    switch(value.apiStatus) {
                                        case "creating":
                                            value.apiStatus = "开发中";
                                            break;
                                        case "finish":
                                            value.apiStatus = "已完成";
                                            break;
                                    }
                                    (value as any).folderName = item.folderName;
                                    newData.push(value);
                                })
                            }
                        });
                        setData(newData);
                    } else {
                        message.error(res.msg);
                    }
                } catch(err) {
                    console.log(err);
                    message.error("出现未知错误，详见控制台");
                    setLoading(false);
                }
                
               
            }
            
        })()
    }, [projectId])
    return (
        <Table
            rowKey="apiId"
            dataSource={data}
            loading={isLoading}
            onRow={(data) => {
                return {
                    onClick: () => {
                        console.log(data);
                    }
                }
            }}
        >
            <Column 
                title="接口名称" 
                dataIndex="apiName"
                render={(value, record:{apiId:number,apiName:string,apiMethod:string,apiStatus:string,folderName:string}) => {
                    return <Link onClick={() => {
                        let pageArr = pages.pages.slice(0);
                        if (myhas(pageArr,"api"+record.apiId) === -1) {
                            pageArr.push({
                                name: record.apiName,
                                key: "api"+record.apiId
                            });
                        }
                        pages.setPages(pageArr);
                        pages.setNow({
                            name: record.apiName,
                            key: "api"+record.apiId
                        });
                        sessionStorage.setItem("pages", JSON.stringify(pageArr));
                        sessionStorage.setItem("now", JSON.stringify({
                            name: record.apiName,
                            key: "api"+record.apiId
                        }));
                    }} to={"./api" + record.apiId}>{value}</Link>
                }}
            ></Column>
            <Column 
            title="接口方法" 
            dataIndex="apiMethod"
            render={(v) => {
                return <Tag color="processing">{v}</Tag>
            }}
            ></Column>
            <Column title="接口分类" dataIndex="folderName"></Column>
            <Column title="状态" dataIndex="apiStatus" render={(v) => {
                let rtn:React.ReactElement = <></>;
                if(v === "开发中") {
                    rtn = <><Badge status="processing"/><span>{v}</span></>
                } else if(v === "已完成") {
                    rtn = <><Badge status="success"/><span>{v}</span></>
                }
                return rtn;
            }}></Column>
        </Table>
    )
}

function myhas(data:Array<any>, key: any) {
    for(let i = 0; i < data.length; i++) {
        if(data[i].key === key) {
            return i;
        }
    }
    return -1;
}